<script setup lang="ts">
  import { ref, computed } from 'vue';
  import NavListItem from './NavListItem.vue';
  // import { IconHome, IconCheckCircle } from '@arco-design/web-vue/es/icon';

  import clubIcon from '/@/assets/pins/m_club.png';
  import polestarIcon from '/@/assets/pins/m_polestar.png';
  import communityIcon from '/@/assets/pins/m_community.png';
  import followIcon from '/@/assets/pins/m_follow.png';
  import { queryCommunitySubPage, queryCommunityList } from '/@/api/community_type';
  import type { CommunityRecord } from '/@/api/model/community_typeModel';

  const clubListRef = ref<CommunityRecord[]>([]);
  const followingListRef = ref<CommunityRecord[]>([]);

  const queryClubList = async () => {
    const data = await queryCommunityList({});
    clubListRef.value = data;
  };

  const queryFollowingList = async () => {
    const data = await queryCommunitySubPage();
    followingListRef.value = data;
  };

  const getNavList = computed(() => {
    return [
      {
        name: '社区大厅',
        icon: communityIcon,
        path: '/pins/lobby',
        id: 1,
      },
      {
        name: '极星',
        icon: polestarIcon,
        path: '/pins/college',
        id: 3,
      },
      {
        name: '关注',
        icon: followIcon,
        // path: '/pins/following',
        id: 4,
        children: followingListRef.value.map((item) => {
          return {
            name: item.name,
            icon: item.logo,
            id: item.id,
            path: `/pins/club/${item.id}`,
          };
        }),
      },
      {
        name: '我的社区',
        icon: clubIcon,
        id: 5,
        // path: '/pins/club',
        children: clubListRef.value.map((item) => {
          return {
            name: item.name,
            icon: item.logo,
            id: item.id,
            path: `/pins/club/${item.id}`,
          };
        }),
      },
    ];
  });

  queryClubList();
  queryFollowingList();
</script>

<template>
  <nav
    class="c-nav-list w-[180px] p-[8px] box-border rounded-[4px] z-50 overflow-auto max-h-[510px] transition-all duration-300 ease-linear"
  >
    <NavListItem
      v-for="item of getNavList"
      :key="item.id"
      :name="item.name"
      :id="item.id"
      :icon="item.icon"
      :path="item.path"
      :children="item.children"
    />
  </nav>
</template>
